<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 300px"></div>
    <!-- ECharts单文件引入 -->
    <script src="dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line',
                'echarts/chart/gauge', 
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
                var option = {
                	    title : {
                	        text: '未来一周气温变化',
                	        subtext: '纯属虚构'
                	    },
                	    tooltip : {
                	        trigger: 'axis'
                	    },
                	    legend: {
                	        data:['最高气温','最低气温']
                	    },
                	    toolbox: {
                	        show : false,
                	        feature : {
                	            mark : {show: true},
                	            dataView : {show: true, readOnly: false},
                	            magicType : {show: true, type: ['line', 'bar']},
                	            restore : {show: true},
                	            saveAsImage : {show: true}
                	        }
                	    },
                	    calculable : true,
                	    xAxis : [
                	        {
                	            type : 'category',
                	            boundaryGap : false,
                	            data : ['周一','周二','周三','周四','周五','周六','周日']
                	        }
                	    ],
                	    yAxis : [
                	        {
                	            type : 'value',
                	            axisLabel : {
                	                formatter: '{value} °C'
                	            }
                	        }
                	    ],
                	    series : [
                	        {
                	            name:'最高气温',
                	            type:'line',
                	            data:[11, 11, 15, 13, 12, 13, 10],
                	            markPoint : {
                	                data : [
                	                    {type : 'max', name: '最大值'},
                	                    {type : 'min', name: '最小值'}
                	                ]
                	            },
                	            markLine : {
                	                data : [
                	                    {type : 'average', name: '平均值'}
                	                ]
                	            }
                	        },
                	        {
                	            name:'最低气温',
                	            type:'line',
                	            data:[1, -2, 2, 5, 3, 2, 0],
                	            markPoint : {
                	                data : [
                	                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                	                ]
                	            },
                	            markLine : {
                	                data : [
                	                    {type : 'average', name : '平均值'}
                	                ]
                	            }
                	        }
                	    ]
                	};
                	           
                
                var option = {
                	    tooltip : {
                	        formatter: "{a} <br/>{c} {b}"
                	    },
                	    toolbox: {
                	        show : true,
                	        feature : {
                	            mark : {show: true},
                	            restore : {show: true},
                	            saveAsImage : {show: true}
                	        }
                	    },
                	    series : [
                	        {
                	            name:'速度',
                	            type:'gauge',
                	            z: 3,
                	            min:0,
                	            max:220,
                	            splitNumber:11,
                	            axisLine: {            // 坐标轴线
                	                lineStyle: {       // 属性lineStyle控制线条样式
                	                    width: 10
                	                }
                	            },
                	            axisTick: {            // 坐标轴小标记
                	                length :15,        // 属性length控制线长
                	                lineStyle: {       // 属性lineStyle控制线条样式
                	                    color: 'auto'
                	                }
                	            },
                	            splitLine: {           // 分隔线
                	                length :20,         // 属性length控制线长
                	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                	                    color: 'auto'
                	                }
                	            },
                	            title : {
                	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                	                    fontWeight: 'bolder',
                	                    fontSize: 20,
                	                    fontStyle: 'italic'
                	                }
                	            },
                	            detail : {
                	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                	                    fontWeight: 'bolder'
                	                }
                	            },
                	            data:[{value: 40, name: 'km/h'}]
                	        },
                	        {
                	            name:'转速',
                	            type:'gauge',
                	            center : ['25%', '55%'],    // 默认全局居中
                	            radius : '50%',
                	            min:0,
                	            max:7,
                	            endAngle:45,
                	            splitNumber:7,
                	            axisLine: {            // 坐标轴线
                	                lineStyle: {       // 属性lineStyle控制线条样式
                	                    width: 8
                	                }
                	            },
                	            axisTick: {            // 坐标轴小标记
                	                length :12,        // 属性length控制线长
                	                lineStyle: {       // 属性lineStyle控制线条样式
                	                    color: 'auto'
                	                }
                	            },
                	            splitLine: {           // 分隔线
                	                length :20,         // 属性length控制线长
                	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                	                    color: 'auto'
                	                }
                	            },
                	            pointer: {
                	                width:5
                	            },
                	            title : {
                	                offsetCenter: [0, '-30%'],       // x, y，单位px
                	            },
                	            detail : {
                	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                	                    fontWeight: 'bolder'
                	                }
                	            },
                	            data:[{value: 1.5, name: 'x1000 r/min'}]
                	        },
                	        {
                	            name:'油表',
                	            type:'gauge',
                	            center : ['75%', '50%'],    // 默认全局居中
                	            radius : '50%',
                	            min:0,
                	            max:2,
                	            startAngle:135,
                	            endAngle:45,
                	            splitNumber:2,
                	            axisLine: {            // 坐标轴线
                	                lineStyle: {       // 属性lineStyle控制线条样式
                	                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
                	                    width: 8
                	                }
                	            },
                	            axisTick: {            // 坐标轴小标记
                	                splitNumber:5,
                	                length :10,        // 属性length控制线长
                	                lineStyle: {       // 属性lineStyle控制线条样式
                	                    color: 'auto'
                	                }
                	            },
                	            axisLabel: {
                	                formatter:function(v){
                	                    switch (v + '') {
                	                        case '0' : return 'E';
                	                        case '1' : return 'Gas';
                	                        case '2' : return 'F';
                	                    }
                	                }
                	            },
                	            splitLine: {           // 分隔线
                	                length :15,         // 属性length控制线长
                	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                	                    color: 'auto'
                	                }
                	            },
                	            pointer: {
                	                width:2
                	            },
                	            title : {
                	                show: false
                	            },
                	            detail : {
                	                show: false
                	            },
                	            data:[{value: 0.5, name: 'gas'}]
                	        },
                	        {
                	            name:'水表',
                	            type:'gauge',
                	            center : ['75%', '50%'],    // 默认全局居中
                	            radius : '50%',
                	            min:0,
                	            max:2,
                	            startAngle:315,
                	            endAngle:225,
                	            splitNumber:2,
                	            axisLine: {            // 坐标轴线
                	                lineStyle: {       // 属性lineStyle控制线条样式
                	                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
                	                    width: 8
                	                }
                	            },
                	            axisTick: {            // 坐标轴小标记
                	                show: false
                	            },
                	            axisLabel: {
                	                formatter:function(v){
                	                    switch (v + '') {
                	                        case '0' : return 'H';
                	                        case '1' : return 'Water';
                	                        case '2' : return 'C';
                	                    }
                	                }
                	            },
                	            splitLine: {           // 分隔线
                	                length :15,         // 属性length控制线长
                	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                	                    color: 'auto'
                	                }
                	            },
                	            pointer: {
                	                width:2
                	            },
                	            title : {
                	                show: false
                	            },
                	            detail : {
                	                show: false
                	            },
                	            data:[{value: 0.5, name: 'gas'}]
                	        }
                	    ]
                	};

                	// clearInterval(timeTicket);
                	timeTicket = setInterval(function (){
                	    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
                	    option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
                	    option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
                	    option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
                	    myChart.setOption(option,true);
                	},2000)
                	                    
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
</body>